<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教学支持数据</title>
    <style>
        /*将容器设置背景颜色：引入图表做衬托*/
        #container{
        width:1200px;
        height:800px;
        background:#E6E6FA;
        margin:auto;
        }
    </style>
    <!--1.引入echarts.js文件(使用预先提供好的图表)-->
    <script src="js/echarts.js"></script>
</head>
<body>
<div id="container"></div>
<!--3.创建并且实例化Echarts对象 DOM树：爬取21种-->
<script>
    var myInit=echarts.init(document.querySelector("#container"))
  option = {
  title: {
    text: '教学支持数据',
    subtext: '课时'


  //样式textStyle  控制标题的样式:color、fontStyle、fontSize
          ,textStyle:{
              color: "#000000"
              ,fontSize: "28"  //
              ,fontWeight:'bold' //文字字体的粗细
          }
        },
         tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['老师9月课时', '老师10月课时']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      data: ['张建', '梁瑾', '高颜领', '王晓明', '康凯', '戚贤', '王俊星','贾槐坚','申亚辉','薄浩丹']
    }
  ],
  yAxis: [
    {
      type: 'value'
      ,scale:true
    }
  ],
  series: [
    {
      name: '老师9月课时',
      type: 'bar',
      data: [
        106,132,106,56,102,190,117,130,166.5,147
      ],
      markPoint: {
        data: [
                {
                    type:"min"
                    ,name: "最小值"
                }
                ,{
                    type:"max"
                    ,name:"最大值"
                }
                 ]
      },
      markLine: {
        data: [{ name:"平均值"
                    ,type:"average"}]
      }
    },
    {
      name: '老师10月课时',
      type: 'bar',
      data: [
        103, 76, 112, 60, 126, 224, 60, 198, 114, 64
      ],
      markPoint: {
        data: [
                {
                    type:"min"
                    ,name: "最小值"

                }
                ,{ name: 'Min', value: 60, xAxis: 6, yAxis: 65 }

                ,{
                    type:"max"
                    ,name:"最大值"
                }
                 ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ]
};
//5.将配置项设置给echarts实例对象
    myInit.setOption(option)

</script>
</body>
</html>